<template>
    <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-input placeholder="姓名" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search">查询</el-button>
                </el-form-item>
                <el-form-item class="pull-right">
                    <el-button-group>
                        <el-button plain size="small" icon="el-icon-circle-plus-outline" @click="handleAddUser" v-if="oauth('oauth/user/add')">添加</el-button>
                        <el-button plain size="small" icon="el-icon-circle-check-outline" @click="handleEnabledUser" v-if="oauth('oauth/user/enabled')">启用</el-button>
                        <el-button plain size="small" icon="el-icon-circle-close-outline" @click="handleDisabledUser" v-if="oauth('oauth/user/disabled')">禁用</el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="listData" border v-loading="listLoading" @selection-change="handleSelectionChange" style="width: 100%;">
            <el-table-column type="selection" width="40"/>
            <el-table-column label="操作" width="65" v-if="oauth('oauth/user/edit')">
                <template scope="scope">
                    <el-button size="small" icon="el-icon-edit" @click="handleEditUser(scope.row.id)"/>
                </template>
            </el-table-column>
            <el-table-column prop="id" width="60" label="ID" sortable/>
            <el-table-column prop="nickName" label="昵称" sortable/>
            <el-table-column prop="email" label="邮箱" sortable/>
            <el-table-column prop="mp" label="手机号" sortable/>
            <el-table-column prop="gender" label="性别" sortable width="80"/>
            <el-table-column prop="registerIp" label="注册IP" sortable/>
            <el-table-column prop="registerTime" label="注册时间" :formatter="formatDate" sortable/>
            <el-table-column prop="state" label="状态" sortable width="80"/>

        </el-table>

        <!--工具条-->
        <el-col :span="24" class="page-container">
            <el-pagination :layout="pageLayout" :page-sizes="pageSizes"
                           background :page-size="pageSize" :total="pageTotalCount"
                           @size-change="pageHandleSizeChange"
                           @current-change="pageHandleCurrentChange"/>
        </el-col>

        <!--新增界面-->
        <el-dialog :title="(isEdit?'编辑账号':'添加账号')" :close-on-click-modal="false" :visible.sync="userFormVisible" size="small">
            <el-form :model="formData" label-width="100px" :rules="addFormRules" ref="userForm" size="small">
                <el-form-item label="常用邮箱：" prop="email">
                    <el-input v-model="formData.email" :disabled="isEdit" auto-complete="off" style="width: 200px"/>
                </el-form-item>
                <el-form-item label="手机号：" prop="mp">
                    <el-input v-model="formData.mp" :disabled="isEdit" auto-complete="off" style="width: 200px"/>
                </el-form-item>
                <el-form-item label="昵称：" prop="nickName">
                    <el-input v-model="formData.nickName" auto-complete="off" style="width: 200px"/>
                </el-form-item>
                <el-form-item label="登录密码：" prop="loginPassword">
                    <el-input v-model="formData.loginPassword" type="password" auto-complete="off" style="width: 200px"/>
                </el-form-item>
                <el-form-item label="确认密码：" prop="confirmPassword">
                    <el-input v-model="formData.confirmPassword" type="password" auto-complete="off" style="width: 200px"/>
                </el-form-item>
                <el-form-item label="性别：" prop="gender">
                    <el-radio-group v-model="formData.gender">
                        <el-radio label="male">男</el-radio>
                        <el-radio label="female">女</el-radio>
                        <el-radio label="secret">保密</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态：" prop="state">
                    <el-radio-group v-model="formData.state">
                        <el-radio label="normal">正常</el-radio>
                        <el-radio label="disable">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="角色：" prop="state">
                    <el-transfer v-model="checkedRoles" :data="listRoles" :titles="['未拥有角色', '已拥有角色']"></el-transfer>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="userFormVisible = false" size="small">取消</el-button>
                <el-button type="primary" @click.native="submitSaveUser" size="small">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<style scoped>
</style>


<script>
    import format from "@/mixins/format";
    import pagination from "@/mixins/pagination";

    export default {
        mixins: [format, pagination],
        data() {
            return {
                listData: [],
                listLoading: false,
                userFormVisible: false,
                isEdit: false,
                addFormRules: {
                    email: [
                        {required: true, message: '请输入常用邮箱', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱', trigger: 'blur'}
                    ],
                    mp: [
                        {required: true, message: '请输入常用手机号', trigger: 'blur'},
                        {len: 11, message: '请输入正确的手机号', trigger: 'blur'}
                    ],
                    nickName: [
                        {required: true, message: '请输入用户昵称', trigger: 'blur'},
                    ],
                    gender: [
                        {required: true, message: '请选择用户性别', trigger: 'change'},
                    ],
                    state: [
                        {required: true, message: '请选择用户状态', trigger: 'change'},
                    ]
                },
                formData: {},
                multipleSelection: [],
                listRoles: [],
                checkedRoles: []
            }
        },
        created: function () {
        },
        mounted() {
            this.findPageData();
            let _this = this;
            this.httpPostRequest("/oauth/role/findAll", {}, function (data) {
                data.forEach(function (row) {
                    _this.listRoles.push({
                        key: row.id,
                        label: row.name
                    });
                });
            });
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEditUser: function (uid) {
                let _this = this;
                this.httpPostRequest("/user/findById", {'uid': uid}, function (data) {
                    let userInfo = data.userInfo;

                    userInfo.listUserLoginAccount.forEach(function (loginAccount) {
                        userInfo[loginAccount.accountType] = loginAccount.loginAccount;
                    });

                    if (userInfo.gender.code === 0) {
                        userInfo.gender = "secret"
                    }
                    if (userInfo.gender.code === 1) {
                        userInfo.gender = "male"
                    }
                    if (userInfo.gender.code === 2) {
                        userInfo.gender = "female"
                    }

                    if (userInfo.state.code === 0) {
                        userInfo.state = "disable"
                    }
                    if (userInfo.state.code === 1) {
                        userInfo.state = "normal"
                    }
                    _this.formData = userInfo;
                    _this.checkedRoles = data.hasRoles;
                    _this.userFormVisible = true;
                    _this.isEdit = true;
                });
            },
            handleEnabledUser: function () {
                let _this = this;
                this.$confirm('您确定要启用用所选择的用户吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let uidArray = new Array(0);
                    _this.multipleSelection.forEach(function (data) {
                        uidArray.push(data.id);
                    });

                    _this.httpPostRequest("/user/enabled", uidArray, function () {
                        _this.findPageData();
                    });
                });
            },
            handleDisabledUser: function () {
                let _this = this;
                this.$confirm('您确定要禁用所选择的用户吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let uidArray = new Array(0);
                    _this.multipleSelection.forEach(function (data) {
                        uidArray.push(data.id);
                    });

                    _this.httpPostRequest("/user/disabled", uidArray, function () {
                        _this.findPageData();
                    });
                });

            },
            handleAddUser: function () {
                this.userFormVisible = true;
                this.isEdit = false;
                this.checkedRoles = [];
                this.formData = {
                    gender: "secret",
                    state: "normal"
                };
            },
            submitSaveUser: function () {
                let _this = this;
                _this.formData.roles = this.checkedRoles;
                this.httpPostRequest("/user/save", _this.formData, function () {
                    _this.pageCurrentPage = 1;
                    _this.findPageData();
                    _this.userFormVisible = false;
                });
            },
            findPageData: function () {
                let _this = this;
                let param = {
                    limit: this.pageSize,
                    currentPage: this.pageCurrentPage
                };
                _this.listLoading = true;
                this.httpPostRequest("/user/list", param, function (data) {
                    _this.listLoading = false;
                    data.data.forEach(function (row) {
                        row.listUserLoginAccount.forEach(function (loginAccount) {
                            row[loginAccount.accountType] = loginAccount.loginAccount;
                        });
                    });
                    console.log(data.data);
                    _this.listData = data.data;

                    _this.pageTotalCount = data.paginator.totalCount;
                });
            }
        },
        watch: {
            pageSize: function () {
                this.findPageData();
            },
            pageCurrentPage: function () {
                this.findPageData();
            }
        }
    }
</script>